﻿<!doctype html>
<html class="no-js" lang="zxx"  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Register || Gilbard</title>
    <div th:include="Common/common :: head"></div>
    <script type="text/javascript">
        $(function (){
            $("#sub_btn").click(function () {
                // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
                //1 获取用户名输入框里的内容
                var usernameText = $("#username").val();
                //2 创建正则表达式对象
                var usernamePatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!usernamePatt.test(usernameText)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("用户名不合法！");

                    return false;
                }

                // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
                //1 获取用户名输入框里的内容
                var passwordText = $("#password").val();
                //2 创建正则表达式对象
                var passwordPatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!passwordPatt.test(passwordText)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("密码不合法！");

                    return false;
                }

                // 验证确认密码：和密码相同
                //1 获取确认密码内容
                var repwdText = $("#repwd").val();
                //2 和密码相比较
                if (repwdText != passwordText) {
                    //3 提示用户
                    $("span.errorMsg").text("确认密码和密码不一致！");

                    return false;
                }

                // 邮箱验证：xxxxx@xxx.com
                //1 获取邮箱里的内容
                var emailText = $("#email").val();
                //2 创建正则表达式对象
                var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                //3 使用test方法验证是否合法
                if (!emailPatt.test(emailText)) {
                    //4 提示用户
                    $("span.errorMsg").text("邮箱格式不合法！");

                    return false;
                }
                // 去掉错误信息
                $("span.errorMsg").text("");

            });
        });
    </script>
</head>

<body>
    
<div id="main-wrapper">
   
    <!--Header section start-->
    <div th:include="Common/common :: header"></div>
    <!--Header section end-->
    
    <!--Page Banner Area Start-->
    <div class="page-banner-area" style="background-image: url(assets/images/bg/page-bg.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-content text-center">
                        <h1>KINGS OF THE <br> WARRIORS</h1>
                        <a class="df-btn" href="#">Buy now</a>
                        <ul class="page-breadcrumb">
                            <li><a href="index1.html">Home</a></li>
                            <li>Login</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Area End-->
    
     <!--Login Section Start-->
    <div class="login-section section pt-95 pt-lg-75 pt-md-65 pt-sm-55 pt-xs-45">
        <div class="container">
            <div class="row">

                <!-- Login -->
                <div class="col-md-6 col-12 d-flex">
                    <div class="gilbard-login">

                        <h3>我们将需要您的注册</h3>
                        <p>请在此输入您的昵称,邮箱以及密码</p>
                        <p><span style="color: red" class="errorMsg"></span></p>
                        <!-- Login Form -->
                        <form action="/register" method="post" th:action="@{/register}">
                            <div class="row">
                                <label style="color: red" th:text="${error}"></label>
                                <div class="col-12 mb-30"><input type="text" placeholder="请输入用户名" name="username" id="username"></div>
                                <div class="col-12 mb-30"><input type="text" placeholder="请输入昵称" name="nickname"></div>
                                <div class="col-12 mb-30"><input type="email" placeholder="请输入邮箱" name="email" id="email"></div>
                                <div class="col-12 mb-30"><input type="password" placeholder="请输入密码" name="password" id="password"></div>
                                <div class="col-12 mb-30"><input type="password" placeholder="请确认密码" id="repwd"></div>
                                <div class="col-12"><input type="submit" value="register" id="sub_btn"></div>
                            </div>
                        </form>
                        <h4>已有账户？点击登录 <a href="index.html" th:href="@{/}">Login</a></h4>
                    </div>
                </div>

                <div class="col-md-1 col-12 d-flex">

                    <div class="login-reg-vertical-boder"></div>

                </div>

                <!-- Login With Social -->
                <div class="col-md-5 col-12 d-flex">

                    <div class="gilbard-social-login">
                        <h3>Also you can login with...</h3>

                        <a href="#" class="facebook-login">Login with <i class="fa fa-facebook"></i></a>
                        <a href="#" class="twitter-login">Login with <i class="fa fa-twitter"></i></a>
                        <a href="#" class="google-plus-login">Login with <i class="fa fa-google-plus"></i></a>

                    </div>

                </div>

            </div>
        </div>
    </div>
     <!--Login Section End-->
    
    <!--Projects section start-->
    <div class="newslatter-section newslatter-section-tow section pt-xs-20 pb-xs-50">
        <div class="container">
           
            <div class="row">
               <div class="col-12">
                   <!--News Latter Area Start-->
                   <div class="news-latter-area newslatter-black">
                       <div class="news-latter-box">
                           <h3>订阅我们的时事通讯，获取所有信息 <br> 最新消息、更新、视频和优惠</h3>
                           <form action="#">
                               <input type="text" placeholder="Enter your email here">
                           </form>
                       </div>
                   </div>
                   <!--News Latter Area End-->
               </div> 
            </div>
            
        </div>
        
    </div>
    <!--Projects section end-->
    
    <!--Footer section start-->
    <footer class="footer-section style-2 section bg-theme" style="background-image: url(assets/images/bg/footer-bg.jpg)">
       
        <!--Footer Top start-->
        <div class="footer-top section pt-175 pt-lg-150 pt-md-125 pt-sm-110 pt-xs-40 pb-80 pb-lg-70 pb-md-60 pb-sm-15 pb-xs-40">
            <div class="container container-1520">
                <div class="row justify-content-lg-between">
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-2 col-md-3">
                        <div class="footer-widget">
                            <div class="footer-logo">
                                <a href="index1.html"><img src="assets/images/logo.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-6 col-lg-6 col-md-9">
                        <div class="footer-widget">
                            <div class="footer-nav">
                                <nav>
                                    <ul>
                                        <li><a href="#">forums</a></li>
                                        <li><a href="#">demo</a></li>
                                        <li><a href="#">support</a></li>
                                        <li><a href="#">terms & conditions</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-4 col-md-12">
                        <div class="footer-widget">
                            <div class="footer-social">
                               <span>follow us:</span>
                                <ul>
                                    <li><a href="#"><i class="icofont-facebook"></i></a></li>
                                    <li><a href="#"><i class="icofont-twitter"></i></a></li>
                                    <li><a href="#"><i class="icofont-instagram"></i></a></li>
                                    <li><a href="#"><i class="icofont-youtube-play"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->    
                    
                </div>
            </div>
        </div>
        <!--Footer Top end-->
        
        <!--Footer bottom start-->
        <div class="footer-bottom border-color section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="copyright text-center">
                            <p>Copyright &copy;2018 <a  href="http://www.genban.org">Gilbard</a>. All rights reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer bottom end-->
        
     </footer>
     <!--Footer section end-->
    
</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/vendor/jquery-1.7.2.js"></script>
</body>

</html>